<!DOCTYPE>
<html>
<head>
    <!--===============================自定义模态框====================================-->
    <style>/* 定义模态对话框外面的覆盖层样式 */
    #modal-overlay {
        visibility: hidden;
        position: absolute; /* 使用绝对定位或固定定位  */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1000;
        background-color: #333;
        opacity: 0.5; /* 背景半透明 */
    }

    /* 模态框样式 */
    .modal-data {
        width: 400px;
        margin: 200px auto;
        background-color: #fff;
        border: 1px solid #000;
        padding: 15px;
        text-align: center;
    }
    </style>

    <script>
        function linka() {

            overlay(null);
            window.location.reload();
        };

        function overlay(message) {
            var e1 = document.getElementById('modal-overlay');
            var p1 = e1.getElementsByTagName("p").item(0).innerHTML = message;
            e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";

        };
    </script>
</head>
<body>
<br/><br/>
<a href="#" onclick="overlay('删除成功')">显示模态对话框</a>

<!--文本框,显示代码用 start-->
    <textarea rows="15" cols="80">
        <!--====css===================-->
    <style>/* 定义模态对话框外面的覆盖层样式 */
    #modal-overlay {
        visibility: hidden;
        position: absolute; /* 使用绝对定位或固定定位  */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1000;
        background-color: #333;
        opacity: 0.5; /* 背景半透明 */
    }

    /* 模态框样式 */
    .modal-data {
        width: 400px;
        margin: 200px auto;
        background-color: #fff;
        border: 1px solid #000;
        padding: 15px;
        text-align: center;
    }
        </style>
        <!--====js===================-->
        <script>
            function linka() {

                overlay(null);
                window.location.reload();
            };

            function overlay(message) {
                var e1 = document.getElementById('modal-overlay');
                var p1 = e1.getElementsByTagName("p").item(0).innerHTML = message;
                e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";

            };
        </script>

        <!--定义模态框-->
        <div id="modal-overlay" style="visibility: hidden;">
            <div class="modal-data">
                <p>一个很简单的模态对话框 </p>
                <button onclick="overlay(null)">关闭</button>
                <button onclick="linka()">确定</button>
            </div>
        </div>

        <!--====添加按钮===================-->
        <a href="#" onclick="overlay('删除成功')">显示模态对话框</a>
    </textarea>
<!--文本框,显示代码用 end-->

<!--&lt;!&ndash;定义模态框&ndash;&gt;-->
<!--<div id="modal-overlay" style="visibility: hidden;">-->
<!--    <div class="modal-data">-->
<!--        <p>一个很简单的模态对话框 </p>-->
<!--        <button onclick="overlay(null)">关闭</button>-->
<!--        <button onclick="linka()">确定</button>-->
<!--    </div>-->
<!--</div>-->




<!--===============================bootstrap模态框====================================-->
<hr/>
<link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
    bootstrap模态框
</button>

<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">默认</h4>
            </div>
            <div class="modal-body">
                <p>内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- jQuery 3 -->
<script src="/static/assets/js/jquery-2.0.3.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/assets/js/bootstrap.min.js"></script>
</body>
</html>